<template>
    <div class="news-container w1200">
      <ul class="news-list flex flex-wrap">
        <li v-for="item in newsList" :key="item._id">
            <router-link :to="`/detail/${item._id}`">
                <img :src="item.cover" width="390" heigth="220" alt="new" />
                <h3 class="ellipsis"> {{ item.title }}</h3>
                <div class="data"> {{ item.updateAt }}</div>
            </router-link>
        </li>
      </ul>
      <!-- 分页 --> 
       <el-pagination
       background
       v-model:current-page="pagination.pageNumber"
      @size-change="handleSizeChange"
      :page-size="pagination.pageSize"
      :page-sizes="[1, 2, 3]"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
     :total="pagination.total"
     class="text-center">
    </el-pagination>

    </div>
  </template>
  
  <script>
  export default {
    name: 'NewsList',
    data() {
        return {
            newList: [],
            pagination: {
                total: 0,
                pageSize: 2, // 每页条数
                pageNumber: 1 // 当前页码
            } 
            
        }
    },
    watch: {
      $route(to, from) {
        // 当路由变化的时候，更新当前页码和每页显示的数据量
        const pageSize = this.pagination.pageSize
        this.pagination.pageSize = parseInt(to.query.pageSize) || pageSize
        this.pagination.pageNumber  = parseInt(to.query.pageNumber) || 1
        this.getNewsList(this.pagination.pageNumber, this.pagination.pageSize)
      }
    },
    // watch: {
    //     $route(to, from) {
    //         // 当路由发生变化时，更新当前页码和每页显示的数据量
    //         const pageSize = this.pagination.pageSize
    //         this.pagination.pageNumber = parseInt(to.query.pageNumber) || 1
    //         this.pagination.pageSize = parseInt(to.query.pageSize) || pageSize
    //         this.getNewsList(this.pagination.pageNumber, this.pagination.pageSize)
    //     }
    // },
    methods: {
      // 一进页面调用接口获取新闻列表数据
      async getNewsList(pageNumber, pageSize) {
        const { data, pagination } = await this.$req('/newslist', 'get', {
          pageNumber: pageNumber || this.pagination.pageNumber,
        pageSize: pageSize || this.pagination.pageSize
        })
        this.newList = data
        this.pagination = pagination
      },
        // 调用接口获取新闻列表数据
        // async getNewsList(pageNumber, pageSize) {
        //     const {data, pagination} = await this.$req('/newslist', 'get', {
        //             pageNumber: pageNumber || this.pagination.pageNumber
        //             pageSize: pageSize || this.pagination.pageSize
        //     })
        //     this.newsList = data
        //     this.pagination = pagination
        // },
        // 选择页码
        // handleCurrentChange(val) {
        //     this.pagination.pageNumber = val
        //     this.$router.push({path: '/news',query: {
        //         pageNumber: this.pagination.pageNumber,pageSize: val
        //     }})
        // },
        //选择页码
        handleCurrentChange(val) {
          this.pagination.pageNumber = val
          this.$router.push({path: '/news', query: {
            pageNumber: this.pagination.pageNumber,pageSize: val
          }})
        },
        // 选择每页显示的数据量
        // handleSizeChange(val) {
        //     this.pagination.pageSize = val
        //     this.$router.push({path: '/news', query: {
        //         pageNumber: this.pagination.pageNumber,pageSize: val
        //     }})
        // }
        //选择每页显示的数据量
        handleSizeChange(val) {
          this.pagination.pageSize = val
          this.$router.push({path: '/news', query: {
                 pageNumber: this.pagination.pageNumber,pageSize: val}})
        }
    },
    created() {
    const { pageNumber: pageNumberInit, pageSize: pageSizeInit } = this.pagination
    const { pageNumber = pageNumberInit, pageSize = pageSizeInit } = this.$route.query
    this.pagination.pageNumber = parseInt(pageNumber)
    this.pagination.pageSize = parseInt(pageSize)
    console.log('pageNumber: ', pageNumber)
    console.log('pageSize: ', pageSize)
    this.getNewsList(pageNumber, pageSize)
  }
  }
  </script>
  
  <style lang="scss" scoped>
  .news-container {
    padding: 80px 0 50px;
    :deep(.el-pagination.is-background .el-pager li) {
        border-radius: 50%;
        width: 35px;
        height: 35px;
        line-height: 35px;
        &:hover {
            background-color: #ff7200;
            color: #ffffff;
        }
    }
    :deep(.el-pagination) {
        line-height: 35px;
        & > * {
            vertical-align: middle;
        }
        .btn-prev,
        .btn-next {
            border-radius: 50%;
            width: 35px;
            height: 35px;
        }
    }
  }

  .news-list {
  min-height: 325px;
  padding-bottom: 90px;
  li {
    margin: 0 20px 70px 0;
    width: calc((100% - 40px) / 3);
    &:nth-child(3n) {
      margin-right: 0;
    }
    &:hover {
      h3 {
        color: #ff7200;
      }
    }
    img {
      width: 390px;
      height: 220px;
    }
    h3 {
      font-size: 16px;
      margin-top: 20px;
      padding-left: 20px;
      width: 390px;
      color: #333;
    }
    .date {
      padding-left: 20px;
      margin-top: 30px;
      font-size: 14px;
      color: #666;
    }
  }
}
  </style>
  